<template>
  <div class="content">
    <div class="title">
      <h2>{{ this.$parent.product.name }}</h2>
      <h2 class="price">￥{{ this.$parent.product.price }}<span>（税后）</span></h2>
    </div>
    <el-divider></el-divider>
    <div class="selection">
      <div class="choice">
        <p>颜色</p>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="choice">
        <p>类别</p>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="choice">
        <p>个数</p>
        <el-input v-model="number"></el-input>
        <button @click="addToCart">加入购物车</button>
      </div>
    </div>
    <el-divider></el-divider>
    <!-- 基本介绍 -->
    <section>
      <p v-for="value in introduce" :key="value">{{ value }}</p>
      <el-divider></el-divider>
    </section>
    <!-- 具体信息 -->
    <section v-for="(value, key) in info" :key="key">
      <el-row>
        <el-col :span="4">
          <p>{{ key }}</p>
        </el-col>
        <el-col :span="20">
          <p v-for="d in value" :key="d">{{ d }}</p>
        </el-col>
      </el-row>
      <el-divider></el-divider>
    </section>
    <section class="tag">
      <el-row>
        <el-col :span="4">
          <span>主标签：</span>
        </el-col>
        <el-col :span="20">
          <span class="tValue" v-for="t in tag" :key="t">#{{ t }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <span>次标签：</span>
        </el-col>
        <el-col :span="20">
          <span class="tValue" v-for="t in tag" :key="t">#{{ t }}</span>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
      ],
      value: "",
      number: 1,
      introduce: [
        "这是茶包用的茶壶。",
        "如果茶的提取结束了，不取盖儿拉茶包放在壶内的架子上。",
        "盖子不容易掉落，可以顺畅地倒进去。",
      ],
      info: {
        容量: ["354ml"],
        大小: ["L 13.3 cm x W 10.4 cm x H 12 cm"],
        重量: ["396g"],
        素材: [
          "弦座：硅",
          "-餐具洗碗机OK",
          "-BPA-免费",
          "-耐热温度差120°C",
          "-茶包的带子固定住的支架。",
          "壶盖：无铅高温烧制硬质陶器",
          "-微波炉OK",
        ],
        使用注意事项: [
          "-使用热水时请注意。",
          "-请勿直接将水壶放在火上。",
          "-将沸腾的水倒入壶中时请小心。",
          "-茶锈沾到的时候，用溶化了碳酸氢钠等的温水浸泡洗的话会有效果。",
        ],
      },
      tag: ["知览茶", "龙井"],
    };
  },
  mounted() {
  },
  methods: {
    addToCart() {
      console.log("增添到购物车！");
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 28%;
  float: left;
  p {
    font-size: 0.9rem;
    letter-spacing: 0.05rem;
    line-height: 2rem;
  }
  .title {
    cursor: default;
    h2 {
      letter-spacing: 0.2rem;
      font-weight: 400;
    }
    .price {
      text-align: right;
      letter-spacing: 0.1rem;
      margin-top: 1rem;
      span {
        font-size: 0.8rem;
      }
    }
  }
  .selection {
    .choice {
      margin-bottom: 10px;
      .el-input {
        width: 60px;
      }
      button {
        display: inline-block;
        white-space: nowrap;
        cursor: pointer;
        background: #101820;
        border: 1px solid #dcdfe6;
        color: #fff;
        -webkit-appearance: none;
        text-align: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        outline: 0;
        margin: 0 0 0 20px;
        -webkit-transition: 0.1s;
        transition: 0.1s;
        font-weight: 500;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
        width: calc(100% - 10px - 60px - 20px);
        font-size: 1.1rem;
        line-height: 1.1rem;
        letter-spacing: 0.2rem;
      }
    }
  }
  section {
    p {
      color: #5d5d60;
      line-height: 1.6rem;
    }
    .el-divider {
      margin: 14px 0;
    }
  }
  .tag {
    font-size: 0.5rem;
    .el-row {
      margin-bottom: 0.5rem;
      .tValue {
        color: #63af8c;
        margin-right: 0.5rem;
      }
    }
  }
}
</style>